<template>
    <div class="personal">
        <div class="main">
            <div class="fl">
                <div class="left_01 bg_white ">
                    <div class="head_txt clearfloat">
                        <div class="head_img fl" v-if="userdatas.headerImg">
                            <img v-bind:src="userdatas.headerImg|filterHeader" alt="">
                        </div>
                        <div class="head_icon" v-else>
                            <i class="iconfont">&#xe638;</i>
                        </div>
                        <div class="user_txt fl">
                            <h4>{{userdatas.username}}</h4>
                            <ul class="clearfloat">
                                <li>
                                    <span>邮箱:</span><span>{{userdatas.email}}</span>
                                </li>
                            
                            </ul>
                            <p class="bule">
                                <span>+你从事什么职业</span>
                                <span>+你的兴趣爱好</span>
                            </p>
                            <router-link to="/setup/personalData" tag="button" class="btn pointer"><i class="iconfont">&#xe636;</i>编辑资料</router-link>
                        </div>
                    </div>
                    <div class="personal_data">
                        <ul class="clearfloat">
                            <li>
                                <p>积  分</p>
                                <h1>{{userdatas.integral}}</h1>
                            </li>
                            <li>
                                <p>粉  丝</p>
                                <h1>{{userdatas.fans.length}}</h1>
                            </li>
                            <li>
                                <p>关  注</p>
                                <h1>{{userdatas.focus.length}}</h1>
                            </li>
                        </ul>
                    </div> 
                </div>
                <div class="left_02 bg_white">
                    <ul class="clearfloat ul">
                        <li><router-link to="./dynamic">动态</router-link></li>
                        <li><router-link to="./articles">我的文章<span>{{articleNumber}}</span></router-link></li>
                        <li><router-link to="./designs">我的作品<span>{{workNumber}}</span></router-link></li>
                        <li><router-link to="./comments">问答<span>{{questionNumber}}</span></router-link></li>
                        <li><router-link to="./collections">收藏<span>{{userdatas.collectionArticles.length+userdatas.collectionWorks.length+userdatas.collectionQuestions.length}}</span></router-link></li>
                        <li><router-link to="./likes">喜欢<span>{{userdatas.likeArticles.length+userdatas.likeWorks.length+userdatas.likeQuestions.length}}</span></router-link></li>                      
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            </div>
            <div class="fl right">
                <div class="bg_white">
                    <div class="title clearfloat">
                        <h2 class="fl">关注用户<span>2</span></h2>
                    </div>
                    <ul class="clearfloat">
                        <li>
                                <div class="head_img fl">
                                    <img src="../../assets/images/head_img01.png" alt="">
                                </div>
                                <div class="fl">
                                    <h4>自杀的张国荣</h4>
                                    <p>
                                        <span>
                                            <i class="bule iconfont">&#xe629;</i>
                                            <span>1,254</span>
                                        </span>
                                        <span>
                                            <i class="iconfont">&#xe608;</i>
                                            <span>3<span>篇</span></span>
                                        </span>
                                    </p>
                                </div>
                            
                        </li>
                        <li>
                                <div class="head_img fl">
                                    <img src="../../assets/images/head_img01.png" alt="">
                                </div>
                                <div class="fl">
                                    <h4>自杀的张国荣</h4>
                                    <p>
                                        <span>
                                            <i class="bule iconfont">&#xe629;</i>
                                            <span>1,254</span>
                                        </span>
                                        <span>
                                            <i class="iconfont">&#xe608;</i>
                                            <span>3<span>篇</span></span>
                                        </span>
                                    </p>
                                </div>                          
                        </li>                     
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
    
</template>
<script>
import axios from 'axios'
import filterHeader from '../../assets/js/filterHeaderImg.js'
export default {
    name:'PersonalHome',
    components:{
       
    },
    data(){
        return {
            userdatas:{},
            articleNumber:'',
            workNumber:'',
            questionNumber:''
        }
    },
    created:function(){
        this.$store.commit('ISNAVHEAD',true);
        var that = this ;
        axios('/api/islogin').then(function(response){
          if(response.data.state==='1'){
            that.$store.commit('USERID',response.data.id);
            that.$store.commit('HEADERIMG',response.data.headerImg);
            that.$store.commit('ISLOGING',true)   
          
            axios.get('/api/personal/getUserData',{
                params:{
                    _id:that.$store.state.userId
                }
            }).then(function(response){
                that.userdatas = response.data[0];
                that.articleNumber = response.data[1].articleNumber;
                that.workNumber = response.data[2].workNumber;
                that.questionNumber = response.data[3].questionNumber
            }).catch(function(err){
                console.log(err)
            })
            
          }else{
            that.$store.commit('ISLOGING',false);
            that.$store.commit('LOGINBOX',true);        
          }
        })
    },
    filters:{
      filterHeader:filterHeader
  }
}
</script>
<style scope lang="scss" src="../../assets/css/personal.scss">
    
</style>

